<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>CCRM管理平台</title>
    <link rel="stylesheet" href="../styles/dpl-min.css" />
    <link rel="stylesheet" href="../styles/bui-min.css" />
    <link rel="stylesheet" href="../styles/main.css" />
</head>
<body>
<!--列表页-->
<div class="container">
    <form id="searchForm" class="form-panel">
        <ul class="panel-content">
            <li>
                <span>
                    <label>订单号：</label>
                    <input type="text" class="control-text" name="order.order_no"/>
                </span>
                <span>
                    <label>原订单号：</label>
                    <input type="text" class="control-text" name="order.original_order_no"/>
                </span>
                <span>
                    <label>物流单号：</label>
                    <input type="text" class="control-text" name="order.express_no"/>
                </span>
                <span>
                    <label>订单网名：</label>
                    <input type="text" class="control-text" name="order.user_name"/>
                </span>
                <span>
                    <label>商品编号：</label>
                    <input type="text" class="control-text" name="order.product_no"/>
                </span>
                <span>
                    <label>店铺名：</label>
                    <input type="text" class="control-text" name="order.shop_name"/>
                </span>
                <span>
                    <label>电话：</label>
                    <input type="text" class="control-text" name="order.phone"/>
                </span>
                <button type="button" id="btnSearch" class="button button-primary">搜索</button>
            </li>
            <li>
                <span>
                  <span class="span3">订单导入时间：</span>
                     <div class="bui-form-group span15" data-rules="{dateRange : true}">
                         <input name="start_time" data-tip="{text : '起始日期'}" class="input-small calendar calendar-time" type="text"><label>&nbsp;-&nbsp;</label>
                         <input name="end_time"  class="input-small calendar calendar-time"  type="text">
                     </div>
                </span>
            </li>
        </ul>
    </form>
    <div class="search-grid-container">
        <div id="grid"></div>
    </div>
</div>

<!--表单页-->
<div id="ModelFormDialog" style="display: none">
    <form id="ModelForm" class="form-horizontal">
        <div class="control-group">
            <label class="control-label">订单号：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="order.order_no" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">原始订单号：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="order.original_order_no" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">物流编号：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="order.express_no" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">订单网名：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="order.user_name" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">商品编号：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="order.product_no" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">数量：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="order.count" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">店铺名：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="order.shop_name" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">电话：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="order.phone" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">收货地址：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="order.address" />
            </div>
        </div>
        <div class="row form-actions actions-bar">
            <div class="span13 offset3 ">
                <button type="submit" class="button button-primary">保存</button>
                <button type="reset" class="button">重置</button>
            </div>
        </div>
    </form>
</div>

<div id="ProductModelFormDialog" style="display: none">
    <div class="search-grid-container">
        <div id="product_grid"></div>
    </div>
</div>

<script type="text/javascript" src="../scripts/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../scripts/bui.js"></script>
<script type="text/javascript" src="../scripts/common/search.js"></script>
<script type="text/javascript">
    var URI = "../clmp/order", MODULE='order';
    BUI.use(['common/search', 'bui/overlay', 'bui/form'], function (Search, Overlay, Form) {
        var columns = [
            {title: '订单号', dataIndex: 'order_no', width: '10%'},
            {title: '原始订单号', dataIndex: 'original_order_no', width: '10%'},
            {title: '物流单号', dataIndex: 'express_no', width: '10%'},
            {title: '订单网名', dataIndex: 'user_name', width: '10%'},
            {title: '商品编号', dataIndex: 'product_no', width: '10%'},
            {title: '购买数量', dataIndex: 'count', width: '5%'},
            {title: '店铺名', dataIndex: 'shop_name', width: '10%'},
            {title: '电话', dataIndex: 'phone', width: '10%'},
            {title: '地址', dataIndex: 'address', width: '10%'},
            {title: '创建时间', dataIndex: 'create_time', width: '10%'},
            {title: '操作', dataIndex: '', width: '11%', renderer: function (value, obj) {
                var editStr = '<shiro:hasPermission name="/clmp/order/*:post"><span class="grid-command btn-edit" title="编辑">编辑</span></shiro:hasPermission>';
                var delStr = '<shiro:hasPermission name="/clmp/order/*:delete"><span class="grid-command btn-del" title="删除">删除</span></shiro:hasPermission>';
                var proStr = '<shiro:hasPermission name="/clmp/packageInfo/findPackageDetail"><span class="grid-command btn-info" title="显示商品">显示商品</span></shiro:hasPermission>';
                return editStr + delStr + proStr;
            }}];
        var store = Search.createStore(URI, {totalProperty: 'total'});
        var gridCfg = Search.createGridCfg(columns, {
            tbar: {
                items: [
                    <shiro:hasPermission name="/clmp/order:post">
                    {text: '<i class="icon-plus"></i>新建', btnCls: 'button button-small', handler: function () {
                        modelFormObject.clearFields();
                        modelFormObject.set('action', URI);
                        modelFormObject.set('method', "POST");
                        modelFormDialog.show();
                    }},
                    </shiro:hasPermission>
                    {<shiro:hasPermission name="/clmp/order/*:delete">text: '<i class="icon-remove"></i>删除', btnCls: 'button button-small', handler: delFunction</shiro:hasPermission>}
                ]
            },
            emptyDataTpl : '<div style="padding: 20px" class="centered"><img src="../img/nodata.png"><h2>好像还没有数据</h2></div>',
            plugins: [BUI.Grid.Plugins.CheckSelection]
        });

        var search = new Search({
            store: store,
            gridCfg: gridCfg
        });
        var grid = search.get('grid');
        //监听事件，删除一条记录
        grid.on('cellclick', function (ev) {
            var sender = $(ev.domTarget); //点击的Dom
            if (sender.hasClass('btn-del')) {
                delItems([ev.record]);
            } else if (sender.hasClass('btn-edit')) {
                edit(ev.record);
            } else if (sender.hasClass('btn-info')) {
                showProduct(ev.record);
            }
        });

        //删除操作
        function delFunction() {
            var selections = grid.getSelection();
            delItems(selections);
        }

        function delItems(items) {
            var ids = [];
            BUI.each(items, function (item) {
                ids.push(item.order_id);
            });

            if (ids.length) {
                BUI.Message.Confirm('确认要删除选中的记录么？', function () {
                    $.ajax({
                        url: URI + "/" + ids.join("-"),
                        dataType: 'json',
                        type: 'DELETE',
                        data: {ids: ids},
                        success: function (data) {
                            if (data.status == 1) {
                                BUI.Message.Alert('操作成功');
                                search.load();
                            } else {
                                BUI.Message.Alert('删除失败！');
                            }
                        }
                    });
                }, 'question');
            }
        }

        var product_store, initialized = false;
        function showProduct(record){
            productModelFormDialog.show();
            if (initialized){
                product_store.load({packTag : record.product_no});
                return;
            }
            var pack_columns = [
                {title : '产品编码',dataIndex : 'product_num',width : '20%'},
                {title : '产品名称',dataIndex : 'name',width : '33%'},
                {title : '产品标题',dataIndex : 'title',width : '40%'},
                {title : '数量', dataIndex : 'product_count', width : '7%'}
            ];
            product_store = Search.createStore('../clmp/packageInfo/findPackageDetail', {
                params : {packTag : record.product_no},
                totalProperty : 'total'
            });
            var product_gridCfg = Search.createGridCfg(pack_columns, {
                emptyDataTpl : '<div style="padding: 20px" class="centered"><img src="../img/nodata.png"><h2>好像还没有数据</h2></div>'
            });
            new Search({
                store : product_store,
                autoSearch : true,
                gridId : 'product_grid',
                gridCfg : product_gridCfg
            });
            initialized = true;
        }

        function edit(record) {
            modelFormObject.clearFields();
            modelFormObject.set('action', URI + "/" + record.order_id);
            modelFormObject.set('method', "POST");
            for (var name in record) {
                modelFormObject.setFieldValue(MODULE+'.' + name, record[name]);
            }
            modelFormDialog.show();
        }

        var modelFormDialog = new Overlay.Dialog({
            title: '表单',
            width: 600,
            height: 800,
            mask: false,
            buttons: [],
            contentId: 'ModelFormDialog'
        });

        var modelFormObject = new Form.HForm({
            srcNode: '#ModelForm',
            submitType: 'ajax',
            callback: function (data) {
                if (data.status === 1) {
                    BUI.Message.Alert('操作成功');
                    modelFormDialog.hide();
                    search.load();
                } else {
                    BUI.Message.Alert('操作失败:' + data.msg);
                }
            }
        }).render();

        var productModelFormDialog = new Overlay.Dialog({
            title : '订单商品列表',
            width : 800,
            height : 450,
            contentId : 'ProductModelFormDialog',
            buttons: []
        });
    });
</script>
</body>
</html>